<script setup>
import { ref } from 'vue'
import TestCache from './components/TestCache.vue' // 缓存
import TestDrag from './components/TestDrag.vue' // 拖拽
import TestResize from './components/TestResize.vue' // resize
import TestLazy from './components/TestLazy.vue' // 懒加载
import TestBase64 from './components/TestBase64.vue' // base64
import TestScroll from './components/TestScroll.vue' // 滚动
const current = ref('0')
const list = { 0: TestCache, 1: TestDrag, 2: TestResize, 3: TestLazy, 4: TestBase64, 5: TestScroll }
const onChange = (item, i) => (current.value = i)
</script>

<template>
  <div class="app-container">
    <div class="tab-container">
      <span
        v-for="(item, i) of list"
        :key="i"
        @click="onChange(item, i)"
        :class="{ active: current === i }"
        >{{ item.__name }}</span
      >
    </div>
    <component :is="list[current]" />
  </div>
</template>

<style lang="scss">
.app-container {
  .tab-container {
    display: flex;
    justify-content: center;
    align-items: center;
    border-bottom: 1px solid #9e9e9e;
    padding: 10px;
    margin-bottom: 10px;

    span {
      padding: 1px 10px;
      cursor: pointer;

      &.active {
        color: #42b983;
      }

      & + span {
        border-left: 1px solid #9e9e9e;
      }
    }
  }
  button,
  input {
    margin-right: 10px;
    border: 1px solid #9e9e9e;
    padding: 5px 10px;
    border-radius: 5px;
    cursor: pointer;
  }
}
</style>
